VSCode의 편집을 위한 필수 확장프로그램이다.
우선, ① 비쥬얼 스튜디오 코드의 확장프로그램의 위치는 아래와 같습니다.
② 검색란에 적어면 자동완성되어 밑에 표시되므로 간편한다.
원하는 확장프로그램이 나오면 ③ 설치(install)버튼을 눌러주시면된다.
VSCode의 편집을 위한 필수 확장프로그램이다.
html, css, javascript, json, sass 정렬 프로그램이다.
내부적으로 beautify 확장 기능을 통해 보기 좋게 정렬해주는 프로그램이다.
사용방법 : 'Fl' 클릭후 검색장에 'Beautify' or 'Beautify file' 눌러주세요.
beautify과 비슷한 코드 정렬 프로그램이다.
둘 다 사용해보고 더 좋은 걸 사용하시면 될 것 같아요!
사용방법 : 'Fl' 단축키 클릭 후 검색창에 ⇒Format Selection 입력하기
Path Intellisense는 경로를 자동으로 입력해주는 프로그램이다.
이미지나 css, js 파일의 경로를 자동으로 입력시켜줍니다.
색상의 컬러를 배경색으로 보여주어 더 가독성있고,수정이 편한 비쥬얼스튜디오 코드 확장프로그램이다.
다들 닫는 태그를 자동으로 입력해 줍니다 (즉 테그를 빠트리는 것을 방지해 줍니다).
'</' 를 입력하면 자동으로 태그를 삽입한다.
태그를 변경할 때, 뒤의 닫는 태그도 동일하게 변경되는 플러그인이다.
일치하는 괄호마다 컬러가 달라서 여는태그와 닫는태그를 직관적으로 확인할 수 있는 확장 프로그램이다.
html, css, js 파일에 아이콘을 더해주는 확장기능이다.
실행화면은 아래 화면이다.
brackets에서 영감을 받았다고 하는 확장기능이다.
html 화면에서 바로 css 코드로 볼 수 있는 기능이다.
css peek이 안될 때는 단축키를 입력을 확인하세요.
css peek 사용 방법을 확인해주세요!
• Peek : CSS 파일을 인라인으로로드하고 바로 편집 할 수 있다. ( Ctrl+Shift+F12)
• 이동 : CSS 파일로 직접 이동하거나 새 편집기에서 엽니다 ( F12). 혹은 'ctrl' 누른 뒤 클릭
• 마우스 오버 : 기호 ( Ctrl+hover)위에 마우스 오버하면 정의를 표시한다.
css 클래스 정의에 대한 class 자동 완성기능을 제공한다.
linkHTML 파일의 요소에 참조되는 외부 스타일 시트를 지원하는 기능이다.
휠 줌 활성화 VS Code 휠 줌 사용하기.
사용방법
Zoom In:
MouseWheel: Scroll Up
Keyboard: Ctrl+ +
Zoom Out:
MouseWheel: Scroll Down
Keyboard: Ctrl+ -
들여쓰기가 무지개색으로 보이는 확장기능이다.
총 4가지 색상으로 이루워져 있다.
실시간으로 서버를 통해 화면을 볼 수 있는 기능이다.
HTML 파일을 열고 편집기를 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 를 클릭한다.
vscode 확장 기능인 Live Server를 이용해 실시간 미리보기를 할 수 있다.
즉 Live Server를 이용해 변경사항이 실시간으로 브라우저에 적용되는 것을 볼 수 있다.
확장: 마켓플레이스에서 Live Server을 설치해 주세요 (앞장 참고)
편집기 화면 우측 하단을 확인 한다.
[Go live] : 연결 안됨
"[Port : 5500] : 연결 됨"
연결방법 부분을 이 될때까지 클릭한다.
①[File(파일)] ⇒ ②[ Preferences(기본 설정)] ⇒ ③[ 설정(setting) ] 화면으로 이동하세요.
찾기에서 ① "auto Save"로 검색하세요.
② files: Auto Save Delay 자동 저장되는 주기를 ③ '600' 0.6초 로 입력해 주세요
편집기에서 실시간 저장을 확인한다.